import React from 'react'
import * as echarts from 'echarts';

import Title from './User_analytics/Component/Title'

import Flushed from './Operate_monitor/Component/Flushed'
import User_Profile from './User_analytics/Component/User_Profile'
import Trend from './Colonel_analytics/Component/Trend'
import Tabular from './Colonel_analytics/Component/Tabular'


export default function Trade_analytics() {

  const data = [
    {
      _id: new Date('2022-01-01'),
      name: '商品总数',
      num: 34,
      trend: '↑ 0%'
    },
    {
      _id: new Date('2022-01-02'),
      name: '活动商品数',
      num: 4,
      trend: '↑ 6.8%'
    },
    {
      _id: new Date('2022-01-03'),
      name: '销售库存',
      num: 2400,
      trend: '↑ 0%'
    },
  ]
  const box = () => {
    var chartDom = document.getElementById('main1');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '团长地区分析',
        subtext: '2024-11-15',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 12, name: '时令果蔬' },
            { value: 5, name: '新鲜蔬菜' },
            { value: 8, name: '肉禽蛋类' },
            { value: 4, name: '海鲜水产' },
            { value: 3, name: '乳品烘焙' },
            { value: 1, name: '休闲食品' },
            { value: 11, name: '粮油副食' },
            { value: 9, name: '酒水饮料' },
            { value: 4, name: '家居清洁' },
            { value: 3, name: '个护美妆' },
            { value: 1, name: '其他' },

          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    option && myChart.setOption(option);
  }


  const twobox = () => {
    var chartDom = document.getElementById('main2');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '团长销售金额以及佣金'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['时令果蔬', '新鲜蔬菜', '肉禽蛋类', '海鲜水产', '乳品烘焙', '休闲食品', '粮油副食', '酒水饮料', '家居清洁', '个护美妆', '其他']
      },
      series: [
        {
          name: '销售金额',
          type: 'bar',
          data: [659, 123, 533, 953, 521, 232, 532, 122, 421, 321, 421]
        },
        {
          name: '销售订单',
          type: 'bar',
          data: [320, 332, 301, 334, 390, 330, 320, 321, 321, 321, 321]
        }
      ]
    };

    option && myChart.setOption(option);
  }







  return (
    <div>
      <Title title='商品分析' />
      <Flushed />
      <User_Profile name='产品概况' data={data} />
      <Trend name='分类数据' onetable='main1' twotable='main2' onebox={box} twobox={twobox}></Trend>
      <Tabular name='产品增长'></Tabular>
    </div>
  )
}